<template>
    <view class="top-container">
        <view class="welcome">
            <view class="welcome-left">
                <view class="greeting">
                    Good Evening!
                </view>
                <view class="welcome-text">
                    <view>嗨，今天是2024年4月14日</view>
                    <view>伴你进步的第3天~</view>
                </view>
            </view>

            <!-- 单击切换首页形态 -->
            <view class="welcome-right" @click="$emit('changeUIMode')">
                <wd-icon name="user-talk" size="22px" color="#fff"></wd-icon>
            </view>

        </view>

        <!-- <view class="taffy"> -->
            <!-- <image src="@/static/数字人.png" mode="aspectFit" class="taffy"></image> -->
            <image v-if="isCalm" src="https://www.yym-free.com/resource/default/gif/d0ab1b19-5949-4075-bb8b-5e30bffb7877.gif" mode="aspectFit" class="taffy"></image>
            <image v-else src="https://www.yym-free.com/resource/default/gif/d87d36df-7ff6-4449-a2ed-0e35a4a654ba.gif" mode="aspectFit" class="taffy"></image>
            <!-- <image src="@/static/359166DA9B342BBE7EFFE85FCCF76F43.gif" mode="aspectFit"></image> -->

        <!-- </view> -->

		<AiConversionCom class="ai-cvs-self" @read-reply="getAudioUrl" 
			@only-read="isCalm = false" @only-stop="isCalm = true" homepage-prompt="true"/>
    </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
// import { chatRouterPages, chatRouterTabs } from '@/js/chatRouter.js';
import AiConversionCom from '../../../components/AiConversionCom.vue';


// onMounted(()=>{
// 	setTimeout(()=>{
// 		uni.$emit('chatAccept', '你好，请问你是谁')
// 	},2000)
// })
// onUnmounted(()=>{
// 	uni.$off('chatAccept')
// })

// 这段删掉
// const messages = ref([
// 	{
// 		type: 'ai',
// 		content: '这道题有什么不懂的随时问我'
// 	},
// 	{
// 		type: 'usr',
// 		content: 'LiHua到底写了多少信'
// 	},
// 	{
// 		type: 'ai',
// 		content: '不知道，你问别人试试？测试测试重复重复，测试测试重复重复，测试测试重复重复测试测试重复重复测试测试重复重复'
// 	},
// 	{
// 		type: 'usr',
// 		content: '我给他写了88封'
// 	}
// ])

const src = ref('')
// const textSubmit = ref('')
const isCalm = ref(true)

// 从后端获取gpt返回的文本消息

// 这个方法放进子组件中，在这里删掉
// const submitButtonClick = () => {
// 	let aiContent;
// 	if (textSubmit.value) {
// 		messages.value.push({
// 			type: 'usr',
// 			content: textSubmit.value
// 		})

// 		const command = textSubmit.value.toLowerCase().trim();

// 		// 查找命令是否在chatRouterPages中
// 		const pageRoute = chatRouterPages[command];
// 		if (pageRoute) {
// 			// 如果找到对应的路由，使用uni.navigateTo跳转到该页面
// 			aiContent = '中嘞哥，已为您跳转到' + pageRoute + '页面';
// 			getAudioUrl(aiContent);
// 			messages.value.push({
// 				type: 'ai',
// 				content: aiContent
// 			})
// 			uni.navigateTo({
// 				url: pageRoute
// 			});
// 		} else {
// 			// 查找命令是否在chatRouterTabs中
// 			const tabRoute = chatRouterTabs[command];
// 			if (tabRoute) {
// 				// 如果找到对应的tab，使用uni.switchTab跳转到该tab页面
// 				aiContent = '中嘞哥，已为您切换到' + tabRoute + '页面';
// 				getAudioUrl(aiContent); // 更改为触发事件
// 				messages.value.push({
// 					type: 'ai',
// 					content: aiContent
// 				})
// 				uni.switchTab({
// 					url: tabRoute
// 				});
// 			} else {
// 				console.log("submit text: " + textSubmit.value);
// 				// 暂时读用户输入的文本，有待改成从后端获取gpt返回的文本消息
// 				getAudioUrl(textSubmit.value); // 更改为触发事件
// 				messages.value.push({
// 					type: 'ai',
// 					content: 'gpt返回的文本消息'
// 				})
// 			}
// 		}

// 		textSubmit.value = '';
// 	}
// }


// 这部分还放在这里
const getAudioUrl = (text) => {
	// #ifdef MP-WEIXIN
	let reg = /<[^>]+>/gi;//去除富文本的标签正则
	let overText = "";
	if (text) {
		overText = text.replace(reg, '');
	}
	
	let plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager();
	
	plugin.textToSpeech({
		lang: "zh_CN",//中文 当然还可以换成其他语言读出
		tts: true,
		content: overText,//要读的内容
		success: (res) => {
			console.log("succ tts: ", res.filename)
			src.value = res.filename;//生成的地址路径
			getInnerAudioContext(src.value)
		}
	})
	// #endif
	// #ifndef MP-WEIXIN
	// 语音合成
	uni.showToast({
		title: '暂不支持语音合成',
		icon: 'none'
	})
	// #endif
}

const innerAudioContext = uni.createInnerAudioContext();

const getInnerAudioContext = (url) => { 
	innerAudioContext.obeyMuteSwitch = false;
	innerAudioContext.autoplay = true;
	innerAudioContext.src = url;
	console.log(innerAudioContext)
	if (innerAudioContext.paused) {
		isCalm.value = false;
		innerAudioContext.play();
	} else {
		innerAudioContext.pause();
	}
	innerAudioContext.onEnded(() => {
		isCalm.value = true;
		innerAudioContext.seek = 0;
	})

}

</script>

<style>
    .top-container{
		position: absolute;
		left: 20px;
		right: 20px;
		top: 8px;
		bottom: 12px;
		display: flex;
		flex-direction: column;
	}
    .welcome{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.greeting{
		font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
		font-size: 21px;
		color: #fff;
		font-weight: bold;
	}
	.welcome-left{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.welcome-text view{
		font-size: 12px;
		color: #aeaeae;
		line-height: 1.5;
	}
	.welcome-right{
		display: flex;
		align-items: center;
		gap: 10px;
	}
    /* .taffy{
        width: 100%;
        display: flex; 
        justify-content: center;
    } */
	.taffy{
		width: 190px; 
		margin-right: 30px; 
		margin-top: -75px; 
		height: 190px;
		align-self: flex-end;
		margin-bottom: 10px;
	}
    /* .taffy image{
		min-height: 100px;
        
	}
    .taffy-image:after {
        
    } */
	.ai-cvs-self{
		height: calc(100% - 190px);
	}
    /* .AIConversation{
        background-color: #201b50;
        padding-top: 20px;
        border-radius: 10px;
    }
	
	.message-container{
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.message-self{
		width: 100%;
		height: auto;
		margin-bottom: 8px;
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
	}
	.message-self .ai-head{
		width: 36px;
		height: 36px;
		background-color: #4942ad;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.message-self .ai-message{
		max-width: calc(100% - 92px);
		margin: 4px 8px;
		color: #fff;
		background-color: #eee;
		color: #333;
		padding: 8px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		letter-spacing: 1px;
	}
	.message-self .usr-message{
		max-width: calc(100% - 92px);
		margin: 4px 8px;
		color: #fff;
		background-color: #4942ad;
		padding: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		letter-spacing: 1px;
	}
	.message-self .usr-head{
		width: 36px;
		height: 36px;
		background-color: #4942ad;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.input-container{
		max-height: 80px;
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		position: sticky;
        bottom: 0;
	}
	.input-container .input-inner{
		color: #000;
		background-color: #eee;
		max-height: 60px;
		height: auto;
		min-height: 24px;
		padding: 8px 8px 4px 8px;
		width: calc(100% - 76px);
		margin-top: 16px;
		border-radius: 4px;
	}
	.input-container .btn{
		width: 48px;
		height: 36px;
		background-color: #4942ad;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
	} */
</style>